<template>
    <div class="right3">
        <section class="section">
            <div class="section__title">续保漏斗</div>
            <div class="chart-box">
                <img src="../../assets/img/funnel2.png" alt="funnel2">
                <ul class="chart-box__value">
                    <li>87.32<span style="font-size: 1.4rem;">%</span></li>
                    <li>47.32<span style="font-size: 1.4rem;">%</span></li>
                    <li>32.24<span style="font-size: 1.4rem;">%</span></li>
                </ul>
            </div>
        </section>

        <section class="section" style="margin-left: 2.8rem;">
            <div class="card">
                <p class="title">留修率</p>
                <span class="value">32.34<span class="unti">%</span></span>
            </div>
            <div class="chart" ref="chartDom"></div>
        </section>
    </div>
</template>

<script setup>
import { ref,onMounted,onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import { rem2px } from "../../utils/scale"


const chartDom = ref(null)
let myChart=null
const chartOption=ref(null)

const list=ref([
    { name: '送修线索量占比', value: Math.round(Math.random() * 100),itemStyle: { color: '#2d79f3' } },
    { name: '运修线索量占比', value: Math.round(Math.random() * 100),itemStyle: { color: '#68d13f' } },
])

const pieOption=(series)=>({
    series
})


const usePieOption=()=>{
    const series = [
        {
            name: '外部名称',
            type: 'pie',
            radius: '60%',
            startAngle:10,
            label: {
                position: 'outside',
                formatter: function(params) {
                    // 每隔 5 个字符换一行（你可以根据需要调整）
                    return params.name.replace(/(.{5})/g, '$1\n');
                },
                fontSize:rem2px(.8),
                color: '#fff'
            },
            labelLine: { 
                show: true,  
                length: 5,   // 第一段线的长度
                length2: 10,  // 第二段线的长度
            },
            data:list.value,
        },
        {
            name: '内部百分比',
            type: 'pie',
            radius: '60%',
            label: {
                    position: 'inside',
                    formatter: function(params) {
                        return Math.round(params.percent) + '%';
                    },
                    color: '#fff',
                    fontSize:rem2px(1.2),
            },
            labelLine: { show: false },
            itemStyle:{
                borderColor: '#000',
                borderWidth: 1,
            },
            data:list.value
        }
    ]
    chartOption.value = pieOption(series)

    if (chartDom.value) {
        myChart = echarts.init(chartDom.value); 
        myChart.setOption(chartOption.value);
    }
}

// 初始化图表
onMounted(() => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);
  
    usePieOption()
    
    const observer = new ResizeObserver(() => {
      myChart?.resize();
    });
    observer.observe(chartDom.value);

    onBeforeUnmount(() => {
      observer.disconnect(); // 停止监听
      myChart?.dispose();
    });
  }

});
</script>


<style lang="scss" scoped>
@import "../../assets/style/main.scss";
$color-border:#494949;
$color-blue:#1caac8;
$color-green:#3fc816;

.right3{
    width: 100%;
    height: 18.2rem;
    margin-top: 0.4rem;  
    display: flex;
}


.chart-box{
    width: 35.6rem;
    height: 16.8rem;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    background-color: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    padding-left: 1.6rem;
    position: relative;
    img{  
        width: 92%;
        height: 88%;  
    }
    &__value{
        list-style: none;
        position: absolute;
        top: 0%;
        left: 30%;
        width: 50%;
        height: 88%;
        li{
            font-size: 2.4rem;
            color: $color-blue;
            letter-spacing: 1px;
            &:nth-child(1){
                margin-top: 4.6rem;
                margin-left: 4.6rem;
            }
            &:nth-child(2){
                color: $color-green;
                margin-left: 9.6rem;
            }
            &:nth-child(3){
                margin-left: 14.8rem;
            }
        }

    }
}


.card{
    margin-top: 1.8rem;
    width: 15.2rem;
    height: 5.6rem;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    background-color: rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
        margin-top: 6px;
        font-weight: 100;
        font-size:1rem;
    }
    .value{
        font-size: 2.8rem;
        color:$color-blue;
        letter-spacing: 2px;
    }
}
.chart{
    margin-left: -1rem;
    width: 105%;
    height: calc(100% - 5.6rem - 1.8rem);
}

</style>    